<script setup>
import { useUserStore, useNoticeStore } from '@/store'
import merge from 'lodash/merge'
import enConfig from 'tdesign-vue-next/es/locale/zh_CN'
import router from '@/router'
onMounted(() => {
  document.addEventListener('touchstart', onTouchStart, { passive: true })
})

onUnmounted(() => {
  document.removeEventListener('touchstart', onTouchStart)
})
const onTouchStart = () => {
  // 空函数，不执行任何操作
}

//获取用户的邀请码
watchEffect(() => {
  let uid = router.currentRoute.value.query.uid
  if (uid) {
    localStorage.setItem('uid', uid)
  }
})

const qrcode = 'https://static.pluse.vip/assets/gzh.webp'
// 全局特性配置，引入英文语言配置包 enConfig
const globalConfig = merge(enConfig, {
  // 可以在此处定义更多自定义配置，具体可配置内容参看 API 文档
  calendar: {},
  table: {},
  pagination: {}
})
const userStore = useUserStore()
const noticeStore = useNoticeStore()
const isLoading = computed(() => userStore.loading) // 计算 isLoading 值
const noticeVisible = computed(() => noticeStore.noticeVisible) // 计算 noticeVisible 值
const bodyMarginTop = computed(() => {
  if (!hideHeaderFooter.value) {
    return '0px'
  } else {
    if (noticeVisible.value) {
      return '100px'
    }
    return '60px'
  }
})

const toChat = () => {
  //console.log('toChat')
  window.open('https://work.weixin.qq.com/kfid/kfc815a9ff356ad9393', '_blank')
}

const hideHeaderFooter = computed(() => {
  const path = router.currentRoute.value.path
  const miniParams = router.currentRoute.value.query.openType
  if (path === '/login') {
    const hidePath = ['/login']
    return !hidePath.includes(path)
  }
  if(miniParams==='miniProgram'){
    return false
  }
  return true
})
</script>

<template>
  <div id="app">
    <t-config-provider :global-config="globalConfig">
      <Notice v-if="hideHeaderFooter" />
      <Header v-if="hideHeaderFooter" />
      <!-- <ThemeSwitcher /> -->
      <div class="main-body" :style="{ marginTop: bodyMarginTop }">
        <router-view />
      </div>
      <Footer v-if="hideHeaderFooter" />
      <t-loading
        :loading="isLoading"
        text="正在加载中..."
        size="large"
        fullscreen
        attach="body"
        preventScrollThrough
      />
      <t-sticky-tool
        :style="{ position: 'fixed', right: '20px', bottom: '100px', overflow: 'hidden' }"
        type="compact"
      >
        <t-sticky-item popup="联系客服">
          <template #icon>
            <t-icon name="chat" @click.native="toChat" />
          </template>
        </t-sticky-item>
        <t-sticky-item :popup-props="{ overlayInnerStyle: { padding: '4px', height: '128px' } }">
          <template #popup>
            <img v-lazy="qrcode" width="120" height="120" />
          </template>
          <template #icon>
            <t-icon name="qrcode" />
          </template>
        </t-sticky-item>
      </t-sticky-tool>
    </t-config-provider>
  </div>
</template>

<style>
.main-body {
  width: 100%;
  box-sizing: border-box;
}
.code-btn {
  margin-right: var(--spacing-12);
  font-size: 16px;
  min-width: 7.5em;
  text-align: end;
  position: absolute;
  right: 0px;
  outline: none;
  border: none;
  background: none;
  color: rgb(0, 157, 255);
  cursor: pointer;
}
</style>
